<template>

  <div style="margin: 20px;">
    <div v-if="form.title" style="font-size: 25px;margin-left: 30px;width: 100%;text-align: center">
      <span>{{ form.title }}</span>
    </div>
    <el-form :model="formData" :rules="rules" ref="ruleForm" class="demo-ruleForm" style="margin-top: 30px">
      <el-row>
        <el-col :span="row.span ? row.span:24" v-for="(row,index) of form.columns" :key="index">
          <el-form-item :label="row.label" :prop="row.prop" :rules="getRules(row)"
            :label-width="row.labelWidth ? row.labelWidth:'100px'">

            <!-- 文本输入框 -->
            <el-input v-if="row.type === itemType.text" v-model="formData[row.prop]" :placeholder="'请输入'+ row.label"
              :type="row.inputType ? row.inputType:'text'" :maxlength="row.maxLength ? row.maxLength:null" size="mini"
              :minlength="row.minLength ? row.minLength:null" :disabled="row.disabled ? row.disabled : false" />

              <!-- 计数器 -->
             <el-input-number v-if="row.type === itemType.Number" v-model="formData[row.prop]" :precision="row.precision || 0"></el-input-number>

            <!-- 单选框 -->
            <el-radio-group v-model="formData[row.prop]" v-if="row.type === itemType.radio">
              <el-radio size="mini" :label="item.prop" v-for="(item,radioIndex) of row.radioGroup" :key="radioIndex"
                :disabled="item.disabled ? item.disabled : false">{{ item.label }}
              </el-radio>
            </el-radio-group>

            <!-- 复选框 -->
            <el-checkbox-group v-model="formData[row.prop]" v-if="row.type === itemType.checkbox">
              <el-checkbox v-for="(item,checkIndex) of row.checkboxGroup" :key="checkIndex" :label="item.label"
                size="mini"></el-checkbox>
            </el-checkbox-group>

            <!-- 下拉框 -->
            <el-select v-model="formData[row.prop]" :placeholder="'请选择'+ row.label" v-if="row.type === itemType.select"
              size="mini">
              <el-option v-for="item in row.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

            <!-- 滑块 -->
            <el-switch v-if="row.type === itemType.switch" v-model="formData[row.prop]" active-color="#13ce66"
              :active-text="row.activeText" :inactive-text="row.inactiveText" inactive-color="#ff4949">
            </el-switch>

            <!-- 日期 -->
            <el-date-picker v-if="row.type === itemType.date" v-model="formData[row.prop]" type="daterange"
              align="right" size="mini" unlink-panels range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>

            <!-- 级联选择器 -->
            <div class="block" v-if="row.type === itemType.Cascader">
              <el-cascader v-model="formData[row.prop]" :options="row.options" :props="{ expandTrigger: 'hover' }"
                size="mini" :filterable='row.filterable || false' :disabled='row.disabled || false' clearable>
              </el-cascader>
            </div>


            <!-- 上传单个图片 -->
            <single-upload-file v-if="row.type === itemType.SingleUpload" v-model="formData[row.prop]"
              @uploadSuccess="uploadSuccess" @handleRemove="handleRemove" :prop="row.prop"
              :urlData="formData[row.prop]" />

            <!-- 上传多个图片 -->
            <many-upload-file v-if="row.type === itemType.BeachUpload" v-model="formData[row.prop]"
              @beachUploadSuccess="beachUploadSuccess" @beachRemove="beachRemove" :prop="row.prop" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button v-if="form.footBut" v-for="(item,index) of form.footBut" :key="index" :type="item.type || 'primary'"
          size="mini" @click="submitForm(item.api)" style="float: right">{{item.text}}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import SingleUploadFile from '../common/SingleUploadFile'
  import ManyUploadFile from '../common/ManyUploadFile'
  import CommonFormEnum from '../enum/CommonFormEnum'

  export default {
    name: 'index',
    components: {
      SingleUploadFile,
      ManyUploadFile
    },
    props: {
      form: {
        /* 表单标题 */
        title: null,
        /* 额外参数 */
        param: {},
        /* 列 */
        columns: [],
        /* 表单按钮 */
        footBut: [],
        /* 提交api */
        api: null,
        /* 表单数据 */
        originalData: null,
      },
    },
    watch: {
      'form.originalData': {
        handler(val) {
          if (val != null)
            this.formData = val
        },
        deep: true
      },
    },
    created() {
      if (this.form.originalData != null) this.formData = this.form.originalData
    },
    data() {
      return {
        formData: {},
        rules: {},
        itemType: {
          text: CommonFormEnum.INPUT,
          radio: CommonFormEnum.RADIO,
          checkbox: CommonFormEnum.CHECKBOX,
          select: CommonFormEnum.SELECT,
          switch: CommonFormEnum.SWITCH,
          date: CommonFormEnum.DATE,
          SingleUpload: CommonFormEnum.SingleUpload,
          BeachUpload: CommonFormEnum.BeachUpload,
          Cascader: CommonFormEnum.Cascader,
          Number: CommonFormEnum.Number,
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        successPath: [],
      }
    },
    methods: {
      /**
       *  表单提交
       */
      submitForm(api) {
        if (!api) return;
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            return api(this.formData)
          } else {
            console.log('表单校验失败!!');
            return false;
          }
        });
      },

      /**
       * 移除图片
       */
      handleRemove(prop) {
        this.formData[prop] = null
      },

      beachRemove(prop, fileList) {
        this.formData[prop] = fileList
      },

      /**
       *  单个上传成功回调
       */
      uploadSuccess(prop, data) {
        this.formData[prop] = data
      },

      /**
       * 批量上传成功回调
       */
      beachUploadSuccess(prop, data) {
        this.successPath = data;
        this.formData[prop] = data
      },

      /**
       *  添加校验规则
       */
      getRules(row) {
        let rule = [];
        if (row.required && row.type === this.itemType.text) rule.push({
          required: true,
          message: '请输入' + row.label,
          trigger: 'blur'
        });
        else if (row.required) rule.push({
          required: true,
          message: '请选择' + row.label,
          trigger: 'blur'
        });
        return rule;
      },
      /**
       * 表单重置
       */
      resetForm() {
        this.$refs['ruleForm'].resetFields();
      }
    },

    /**
     * 级联选择器回调
     * @param {Object} value
     */
    cascaderChange(value) {
      console.log(value);
    }
  }
</script>


<style>

</style>
